<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../../static/jquery/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../static/jquery/js/jquery-ui-1.8.23.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../static/jquery/css/ui-lightness/jquery-ui-1.8.23.custom.css">

<style type="text/css">
    body{
    	margin: 0px;
    	padding: 0px;
    	display: block;
    	font: 12px/1.125 Arial,Helvetica,sans-serif;
    	background: #d3d2d2 url("../../static/img/background.png");
    	background-repeat:  repeat;
    }
	.wraper{
		width: 960px;
		margin: 0px auto;
		padding: 1px 0 0 0;
		background: #FFFFFF;
		
	}
	.banner{
		height: 28px;
		background: #EDEDED;
	}
	.banner ul,.footerbar ul{
		display: inline;
		list-style: none;
	}
	.banner ul li,.footerbar ul li{
		font-family:"宋体","Times New Roman",Georgia,Serif;
		font-size: 16px;
		float: left;
		margin: 0 0 0 10px;
	}
	.banner .left{
		
	}
	.banner .center{	
		font-size:16px;
		float: right;
	}
	
	.banner .right{
		font-size:16px;
		margin: 0px;
		float:right;
	}
	#register_btn,#login_btn{
		font-size: 10px;
	}
	.banner ul li a:link,.banner ul li a:visited,
	.footerbar ul li a:link,.footerbar ul li a:visited,
	.banner .right a:link,.banner .right a:visited
	{
		text-decoration: none;
		color:  #000000;
	}
	label{
		font-size: 16px;
	}
	.logo{
	 	height: 80px;
	}
	.logo .left{
		width: 200px;
		height: 80px;
	}
	.logo .right{
	
	}
	
	.weibo{
		overflow:hidden;
		height: 100px;
		padding: 2px 10px;
	}
	
	.content .level{
		height: 300px;
	 	margin-bottom: 10px;
	}
	.level{
		overflow: hidden;
	}
	.level .left{
		float: left;
		width: 480px;
		height:300px;
		padding: 0px 2px;
	}
	.level .right{
		margin-left: 489px;
		padding: 0px 2px;
		height:300px;
		
	}
	.levelbar{
		height: 30px;
		color:#248ef4;
		background: #d3d2d2;
		font-weight:bold;
		font-size:30px;
		filter: alpha(opacity=70);
		-khtml-opacity: 0.7;
		opacity: 0.7;
		-moz-opacity:0.7;
		
	}
	.levelcontent{
		margin: 0px;
		text-align: left;
		padding: 10px;
		line-height: 16px;
	}
	.footer{
		text-align: center;
	}
	.footerbar{
		margin: 0px auto;
		width: 400px;
	}
	
</style>


<!-- 注册页面样式表 -->
<style type="text/css"> 
  	#register{
  		font-size: 16px;
  		margin: 0px;
  		padding: 0px;
  	}
  	#register ul li{
  		 list-style:  none;
  		 height: 50px;
  		 width: 500px;
  		 margin: 0px auto;
  	}
  	#register .errmsg{
  		color: red;
  	}
  	#register .label {
  		display:inline-block;
		width:100px;
		margin-right: 5px;
	}

	#register input{
		display:inline-block;
		width:200px;
		height: 20px; 
		margin-right: 5px;
	}
	#register  .star {
		display:inline-block;
  		font-weight: bold;
  		color: red;
	}	
  </style>
  
<!-- 登录页面 -->
<style type="text/css">
  
  	#login{
  		font-size: 16px;
  		margin: 0px;
  		padding: 0px;
  	}
  	#login ul li{
  		 list-style:  none;
  		 height: 50px;
  		 width: 500px;
  		 margin: 0px auto;
  	}
  	#login .errmsg{
  		color: red;
  	}
  	#login .label {
  		display:inline-block;
		width:100px;
		margin-right: 5px;
	}

	#login input{
		display:inline-block;
		width:200px;
		height: 20px; 
		margin-right: 5px;
	}
	#login  .star {
		display:inline-block;
  		font-weight: bold;
  		color: red;
	}
	
  </style>


</head>
<body>
	<div class="wraper">
		<div class="banner">
			<div class="left">
				<ul>
				<li><a href="#" class="atype1">首页</a></li>
				<li><a href="#" class="atype1">校园生活</a></li>
				<li><a href="#" class="atype1">资源共享</a></li>
				<li><a href="#" class="atype1">跳蚤市场</a></li>
				<li><a href="#" class="atype1">博客天地</a></li>
				<li><a href="#" class="atype1">论坛交流</a></li>
			</ul>
			</div>
			
			<div class="right">
				<div id="register_btn">注册</div>
			</div>
			
			<div class="center">				
				<div id="login_btn">登录</div>
			</div>
			
			
		</div >
		
		<div class="logo">
			<div class="left">
				<img alt="" src="../../static/img/logo.png">
			</div>
			<div class="right">
			</div>
		</div>
		<div class="weibo">
			由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
			由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
			由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
			由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天! 
		</div>
		<div class="content">
			<div id="level1" class="level">
				<div class="left">
					<div class="levelbar">资源共享</div>
					<div class="levelcontent">
					由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
					</div>
				</div>
				<div class="right">
					<div class="levelbar">图片中心</div>
					<div class="levelcontent">
					由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
					由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
					
					由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
					
					由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
					</div>
				</div>
			</div>
			<div id="level2" class="level">
				<div class="left">
					<div class="levelbar">博客天地</div>
					<div class="levelcontent">
					由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
					</div>
				</div>
				<div class="right">
					<div class="levelbar">论坛交流</div>
					<div class="levelcontent">
					由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
					由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
					
					由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
					
					由于上次活动时间太短，很多需要课程的同学这两天不断在咨询，故将活动延长四天!                                         为了增加14年我们网站人气，此次活动只针对14年考研同学！活动期间您只需付168元开通考研365网一站通会员，就可以获得13年新东方、文都、文登 、学府、启航、海天、海文多辅导班所有考研科目的高辅vip全程视频课程。                                               参与活动13年课程现在开通，14年课程明年可以继续免费看。
					</div>
				</div>
			</div>
		</div>
		
		<div  class="footer">
			<div class="footerbar">
				<ul>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">招贤纳士</a></li>
					<li><a href="#">联系方式</a></li>
					<li><a href="#">版权声明</a></li>
					<li><a href="#">广告服务</a></li>
				</ul>
			</div>
			<div>
			</div>
		</div>
	</div>
	
	
	<!-- 注册页面 -->
	<div id="register" title="注册">
	<form action="/user/register.do" method="post" id="register_form">
			<ul>
				<li class="errmsg"></li>
				<li>
					<span class="label">昵称:</span>
					<span class="input"><input type="text" name="username" class="username"></span>
					<span class="star img_username">*</span></li>
				<li>
					<span class="label">邮箱:</span>
					<span class="input"><input type="text" name="email" class="email"></span>
					<span class="star img_email">*</span></li>
				<li>
					<span class="label">密码:</span>
					<span class="input"><input type="password" name="password" class="password"></span>
					<span class="star img_password">*</span></li>
				<li>
					<span class="label">确认密码:</span>
					<span class="input"><input type="password" name="password1" class="password1"></span>
					<span class="star img_password1">*</span></li>
			</ul>
     </form>
</div>

	<!-- 登录页面 -->
	<div id="login" title="用户登录">
		<form action="/user/login_by_email.do" method="post" id="login_form">
				<ul>
					<li class="errmsg"></li>
					<li>
						<span class="label">邮箱:</span>
						<span class="input"><input type="text" name="email" class="email"></span>
						<span class="star img_email">*</span></li>
					<li>
						<span class="label">密码:</span>
						<span class="input"><input type="password" name="password" class="password"></span>
						<span class="star img_password">*</span></li>
				</ul>
	     </form>
	</div>

<!-- 注册 -->
<script type="text/javascript">
  $(document).ready(function() {
    $("#register").dialog({buttons: { "注册": function() {_register(); },"取消":function(){ $(this).dialog("close");} },
    	autoOpen: false ,hide:{ effect: 'drop', direction: "up" },modal:true,width:600,height:400,
    	draggable:false,resizable:false});
    $("#register .username").blur(function(){
    	_register_check_username($(this).val());
    });
    $("#register .email").blur(function(){
    	_register_check_email($(this).val());
    });
    $("#register .password").blur(function(){
    	_register_check_password($(this).val());
    });
    $("#register .password1").blur(function(){
    	_register_check_password1($(this).val());
    });
    
    $("#register_btn").button();
    $("#register_btn").click(function(){
    	$("#register  .star").html("*");
    	$("#register").dialog("open");
    });
  });

  function _register_check_username(str) {
		flag=true;
		if (str==undefined||str==null||str == ""){
			$("#register .img_username").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">用户名不能为空");
			flag=false;
		}else if(str.length<1){
			$("#register .img_username").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">用户名最少为3个字符");
			flag=false;
		}else{
			$("#register .img_username").html( "<img width=\"40\"  height=\"40\" src=\"../../static/img/progress_bar.gif\" >");
			if(_register_exist_user(str)){
				$("#register .img_username").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">用户名已经存在");
				flag=false;
			}else{
				$("#register .img_username").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
			}
			
		}
		
		return flag;
	}
	function _register_check_email(str) {
		flag=true;
		if (str==undefined||str==null||str == ""){
			$("#register .img_email").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">真实姓名不能为空");
			flag=false;
		}else if(str.length<1){
			$("#register .img_email").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">真实姓名最少为3个字符");
			flag=false;
		}else{
			$("#register .img_email").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
		}
		return flag;
	}
	function _register_check_password(str) {
		flag=true;
		if (str==undefined||str==null||str == ""){
			$("#register .img_password").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">密码不能为空");
			flag=false;
		}else if(str.length<1){
			$("#register .img_password").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">密码最少为3个字符");
			flag=false;
		}else{
			$("#register .img_password").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
		}
		
		return flag;
	}
	function _register_check_password1(str) {
		var str1=$("#register .password").val();
		flag=true;
		if (str==undefined||str==null||str!=str1){
			$("#register .img_password1").html ("<img src=\"../../../static/img/check_error.png\" align=\"middle\">两次密码不一样");
			flag=false;
		}else{
			$("#register .img_password1").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
		}
		
		return flag;
	}
	
	function _register_checkAll() {
		var username=$("#register .username").val();
		var email=$("#register .email").val();
		var password=$("#register .password").val();
		var password1=$("#register .password1").val();
		var flag=_register_check_username(username);
		if(flag)
			flag=_register_check_email(email);
		if(flag)
			flag=_register_check_password(password);
		if(flag)
			flag=_register_check_password1(password1);
		
		return flag;
	}
	
	function _register_exist_user(username) {
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.open("GET", "/user/check_user.do?username="+username, false);
		xmlhttp.send();
		var result = xmlhttp.responseText;
		if(result=="true")
			return true;
		else 
			return false;
	}
	function _register(){
		var flag= _register_checkAll();
		if(flag)
			$("#register_form").submit();
			
	}
  </script>
  <!-- 登录 -->
  <script type="text/javascript">
  $(document).ready(function() {
    $("#login").dialog({buttons: { "登录": function() {_login(); },"取消":function(){ $(this).dialog("close");} },
    	autoOpen: false ,hide:{ effect: 'drop', direction: "up" },modal:true,width:550,height:300,
    	draggable:false,resizable:false});
    $("#login .email").blur(function(){
    	_login_check_email($(this).val());
    });
    $("#login .password").blur(function(){
    	_login_check_password($(this).val());
    });
    $("#login_btn").button();
    $("#login_btn").click(function(){
    	$("#login  .star").html("*");
    	$("#login").dialog("open");
    });
   
  });
	function _login_check_email(str) {
		flag=true;
		if (str==undefined||str==null||str == ""){
			$("#login .img_email").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">邮箱不能为空");
			flag=false;
		}else if(str.length<1){
			$("#login .img_email").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">邮箱格式有误");
			flag=false;
		}else{
			$("#login .img_email").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
		}
		
		return flag;
	}
	function _login_check_password(str) {
		flag=true;
		if (str==undefined||str==null||str == ""){
			$("#login .img_password").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">密码不能为空");
			flag=false;
		}else if(str.length<1){
			$("#login .img_password").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">密码最少为3个字符");
			flag=false;
		}else{
			$("#login .img_password").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
		}
		
		return flag;
	}
	
	function _login_checkAll() {
		var flag=_login_check_email($("#login .email").val());
		if(flag)
			flag=_login_check_password($("#login .password").val());
		return flag;
	}
	function _login(){
		var flag=_login_checkAll();
		if(flag)
			$("#login_form").submit();	
	}
  </script>

</body>
</html>